<template>
	<view class="container">
		<view class="contant">
			<view class="service-wrapper">
				<view class="service-header">
					<view :class="current === index ? 'header-active' : ''" v-for="(item, index) in typeList"
						:key="index" @click="changeType(index)">{{ item.label }}</view>
				</view>
			</view>
			<view class="loading" v-if="loading">
				<u-loading-icon text="加载中" mode="semicircle" textSize="14"></u-loading-icon>
			</view>
			<view v-if="!loading">
				<view class="loading" v-if="list.length==0">
					<u-empty></u-empty>
				</view>
				<view class="contant-list" v-else>
					<view class="contant-item" v-for="(item,index) in list" :key="item.id" @click="jumpDetail(item.id)">
						<view class="contant-flex" style="margin-bottom: 30rpx;">
							<view class="contant-item-title">
								{{item.patient_name}}
							</view>
							<view class="contant-item-detail" >
								查看预约
							</view>
						</view>
						<view class="contant-item-desc contant-item-time">
							就诊人症状描述：{{item.chief_complaint}}
						</view>
						<view class="contant-flex">
							<view class="contant-item-time">
								发病时间：{{item.onset_time}}
							</view>
							<view class="contant-item-button">
								{{handleStatus(item.application_status)}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="flex-button">
			<view class="flex-button-item" @click="jumpMedical">
				去填表
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		imgUrl
	} from '../../utils/global';
	import moment from "moment"
	import {
		onLoad,
		onReady,
		
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		getapplicationlist
	} from '@/api/medical';
	import {
		useUserStore
	} from '@/store/user';
	const userStore = useUserStore();
	import {
		ref
	} from "vue";
	const typeList = ref([{
		label: "全部的",
		value: ""
	}, {
		label: "未付款",
		value: 2
	}, {
		label: "已预约",
		value: 4
	}, {
		label: "已体检",
		value: 5
	}])
	const current = ref(0)
	const loading = ref(false)
	const list = ref([])
	const changeType = (index) => {
		current.value = index;
		getList()
	};
	const jumpMedical = () => {
		uni.navigateTo({
			url: "/pages/medical/medical"
		});
	}
	
	onPullDownRefresh(()=>{
		getList()
	})
	onLoad(() => {
		getList()
	})
	const getList = () => {
		let application_status = typeList.value[current.value].value
		loading.value = true
		getapplicationlist({
			uid: userStore.userInfo.id,
			application_status
		}).then(res => {
			list.value = res[0]
			loading.value = false
			uni.stopPullDownRefresh()
		}).catch(err => {
			loading.value = false
			uni.stopPullDownRefresh()
		})
	}
	const jumpDetail=(id)=>{
		uni.navigateTo({
			url: "/pages/medical/detail?id="+id
		});
	}
	const handleStatus = (status) => {
		switch (Number(status)) {
			case 1:
				return "待审核";
			case 2:
				return "去付款";
			case 4:
				return "已预约";
			case 5:
				return "已体检";
			case 6:
				return "已取消";
			default:
				return "获取失败";
		}
	};
</script>

<style scoped>
	.loading {
		padding-top: 200rpx;
	}

	.flex-button {
		position: fixed;
		bottom: 0rpx;
		left: 30rpx;
		right: 30rpx;
		background: #fff;
		padding: 30rpx 30rpx 140rpx 30rpx;
	}

	.flex-button-item {
		background: linear-gradient(180deg, #FF7F36 0%, #F54730 100%);
		border-radius: 51rpx 51rpx 51rpx 51rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.container {
		padding: 30rpx;
		background: #F8F8FA;
	}

	.contant {
		background-color: #fff;
		min-height: calc(100vh - 60rpx);
		border-radius: 16rpx 16rpx 0 0;
	}

	.contant-list {
		padding: 30rpx;
		padding-bottom: 200rpx;
	}

	.contant-item {
		font-size: 24rpx;
		padding: 30rpx;
		background: linear-gradient(134deg, #FFFFFF 0%, #FFF7F3 100%);
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin-bottom: 30rpx;
	}

	.contant-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contant-item-title {
		color: #434343;
		font-size: 26rpx;
	}

	.contant-item-detail {
		color: #333;
		text-decoration: underline;
	}

	.contant-item-time {
		color: #B6B6B8;

	}

	.contant-item-desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		margin-bottom: 80rpx;
		/* 限制最多显示3行 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 可选，部分浏览器不生效 */
		word-break: break-word;
	}

	.contant-item-button {
		background: #FF7F36;
		border-radius: 43rpx;
		color: #FFFFFF;
		padding: 0 78rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: inline-block;
	}

	.service-header {
		width: 100%;
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.service-header>view {
		flex: 1;
		height: inherit;
		color: #434343;
		font-weight: 400;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 2px solid #3333331e;
		box-sizing: border-box;
	}

	.header-active {
		color: #FF7F36 !important;
		border-bottom: 2px solid #FF7F36 !important;
	}

	.service-wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 16rpx;
	}
</style>